/*
*   @Author: 1296
*   @Date: 2025-03-20
*   @Description: 已登录导航栏，包含导航菜单、头像和登出按钮
*/

<template>
  <div class="navbar">
    <ConfirmModal
        v-model:show="showLogoutConfirm"
        :message="$t('confirmToLogout')"
        @confirm="logout"
    />
    <img class="logo" src="@/assets/logo.png" alt="Logo" @click="toTest" />
    <img class="title" src="@/assets/title.png" alt="Title" />
    <button
        v-for="(item, index) in menuItems"
        :key="index"
        :class="{'menu-button': true, 'active': activeIndex === index}"
        @click="navigateTo(index)"
        :style="{ left: buttonPositions[index] }"
    >
      {{ $t(item) }}
    </button>
    <p class="welcome">{{ $t('Welcome') }}<span v-if="shouldShowUsername">{{ username }}</span></p>
    <button
        class="portrait-button"
        @click="goToPersonalPage"
        :style="{
          backgroundImage: `url(${avatarSrc})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }"
        @error="setDefaultAvatar"
    ></button>
    <button class="logout-button" @click="confirmLogout"></button>
  </div>
</template>

<script>
import ConfirmModal from "@/components/ConfirmModal.vue";

export default {
  name: "LGNavbar",
  components: {ConfirmModal},
  data() {
    return {
      activeIndex: 0,
      menuItems: ["dashboard", "PersonalPage", "MyProfile", "systemSettings"],
      buttonPositions: ["34.3%", "47.3%", "60.4%", "73.4%"],
      showLogoutConfirm: false
    };
  },
  computed: {
    jobCode() {
      return sessionStorage.getItem('jobCode') || '';
    },
    username() {
      return sessionStorage.getItem('username') || '';
    },
    shouldShowUsername() {
      return !['ja', 'ko'].includes(this.$i18n.locale);
    },
    dynamicRoutes() {
      return [
        `/${this.jobCode}/dashboard`,
        `/${this.jobCode}/personalPage`,
        `/${this.jobCode}/myProfile`,
        `/${this.jobCode}/setting`
      ];
    },
    avatar() {
      return this.$store.state.user.avatar || sessionStorage.getItem('avatar') || '';
    },
    avatarSrc() {
      if (this.avatar) {
        // 如果是 base64 格式图片，直接返回
        if (this.avatar.startsWith('data:image')) {
          return this.avatar;
        } else {
          return require('@/assets/guest.jpg');
        }
      } else {
        // 默认头像
        return require('@/assets/guest.jpg');
      }
    }
  },
  methods: {
    navigateTo(index) {
      this.activeIndex = index;
      this.$router.push(this.dynamicRoutes[index]);
    },
    goToPersonalPage() {
      this.$router.push(`/${this.jobCode}/myProfile`);
    },
    logout() {
      sessionStorage.removeItem('id');
      sessionStorage.removeItem('userToken');
      sessionStorage.removeItem('username');
      sessionStorage.removeItem('avatar');
      sessionStorage.removeItem('phone');
      sessionStorage.removeItem('gender');
      sessionStorage.removeItem('email');
      sessionStorage.removeItem('institute');
      sessionStorage.removeItem('major');
      sessionStorage.removeItem('className');
      sessionStorage.removeItem('role');
      sessionStorage.removeItem('locale');
      sessionStorage.removeItem('jobCode');
      this.$store.commit('CLEAR_USER');
      this.$i18n.locale = 'zh-CN';
      this.$router.push('/');
    },
    setDefaultAvatar(event) {
      // 设置默认头像背景
      event.target.style.backgroundImage = `url(${require('@/assets/guest.jpg')})`;
    },
    updateActiveIndex() {
      const currentRoute = this.$route.path;
      const index = this.dynamicRoutes.indexOf(currentRoute);
      this.activeIndex = index !== -1 ? index : 0;
    },
    confirmLogout() {
      this.showLogoutConfirm = true;
    },
    toTest() {
      this.$router.push('/test');
    }
  },
  watch: {
    $route() {
      this.updateActiveIndex();
    }
  },
  mounted() {
    this.updateActiveIndex();
  }
};
</script>

<style scoped>
.navbar {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: calc(100 / 1920 * 100vw);
  margin: 0 auto;
  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 15.63%, rgba(15,64,245,0.85) 100%);
}

.logo {
  position: absolute;
  left: 5.42%;
  top: calc(5px / 1920 * 100vw);
  width: 5.42%;
  height: auto;
}

.title {
  position: absolute;
  left: 13.33%;
  top: calc(5px / 1920 * 100vw);
  width: 20%;
  height: auto;
}

.menu-button {
  position: absolute;
  top: 0;
  width: calc(10.42 / 100 * 100%);
  height: 100%;
  background-color: transparent;
  color: black;
  font-size: 1.2vw;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.5s, color 0.5s;
}

.active {
  background-color: white;
  color: black;
  animation: slideUp 0.5s;
}

@keyframes slideUp {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}

.welcome {
  color: #FFFFFF;
  position: absolute;
  right: calc((1920 - 1760) / 1920 * 100vw);
  top: calc(20 / 1920 * 100vw);
  font-size: 1vw;
}

/* 头像按钮样式 */
.portrait-button {
  position: absolute;
  right: calc((1920 - 1840) / 1920 * 100vw);
  top: calc(20 / 1920 * 100vw);
  width: calc(60 / 1920 * 100vw);
  height: calc(60 / 1920 * 100vw);
  border: none;
  border-radius: calc(100 / 1920 * 100vw);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.portrait-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.logout-button {
  position: absolute;
  right: calc(0 / 1920 * 100vw);
  top: calc(0 / 1920 * 100vw);
  width: calc(66 / 1920 * 100vw);
  height: calc(100 / 1920 * 100vw);
  border: none;
  background-color: transparent;
  background-image: url("@/assets/logout1.png");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color 0.3s, background-image 0.3s;
}

.logout-button:hover {
  background-color: white;
  background-image: url("@/assets/logout2.png");
}
</style>